<script setup lang="ts">
import Practice from './Practice.vue';
import Resource from './Resource.vue';
import Announcement from './Announcement.vue';
import Video from './Video.vue';
import RankList from './RankList.vue';

import { reactive, ref, watch, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';

import type { LocationQueryValue } from 'vue-router';

const route: any = useRoute();

let currentIndex = ref(1);
let componentName = [0, Announcement, Resource, Practice, Video, RankList];
const tabbar = (id: number) => {
  currentIndex.value = id;
};

const itemList = reactive([
  {
    id: 1,
    name: '课程公告',
    img: '/course/文章.svg',
  },
  {
    id: 2,
    name: '学习资料',
    img: '/course/知识.svg',
  },
  {
    id: 3,
    name: '同步练习',
    img: '/course/practice.svg',
  },
  {
    id: 4,
    name: '视频讲解',
    img: '/course/video.svg',
  },
  {
    id: 5,
    name: '排行榜',
    img: '/course/奖杯.svg',
  },
]);
</script>

<template>
  <div class="left">
    <div class="left_header">
      <img :src="route.query.img" alt="" />
    </div>
    <div class="left_main">
      <div class="box">
        <el-icon>
          <Grid />
        </el-icon>
        <div style="margin: 10px 0">选课人数</div>
        <div>{{ route.query.people }}</div>
      </div>
      <div class="box">
        <el-icon>
          <Avatar />
        </el-icon>
        <div style="margin: 10px 0">任课老师</div>
        <div>{{ route.query.teacher }}</div>
      </div>
    </div>
    <div class="left_body">
      <ul class="bar">
        <li class="bar_item" :class="item.id == currentIndex ? 'active' : ''" v-for="item in itemList" :key="item.id" @click="tabbar(item.id)">
          <img :src="item.img" alt="" />
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
  <div class="center"></div>
  <div class="right">
    <component :is="componentName[currentIndex]"></component>
  </div>
</template>

<style scoped lang="scss">
.left {
  position: absolute;
  left: 0;
  width: 15%;
  height: 100%;
  box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7);

  &_header {
    height: 20%;

    img {
      width: 100%;
      height: 100%;
    }
  }

  &_main {
    height: 20%;
    font-size: 16px;
    color: $fontcolor;
    @include flex; //使用样式

    .box {
      @include flex-column; //使用样式
    }
  }

  &_body {
    .bar {
      padding-left: 0px;

      &_item {
        width: 85%;
        height: 56px;
        border-top-right-radius: 56px;
        border-bottom-right-radius: 56px;

        @include flex; //使用样式
        list-style: none;
        cursor: pointer;

        img {
          width: 30px;
          height: 30px;
        }
      }

      .active {
        transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
      }

      &_item:hover {
        // background-color: rgb(10, 177, 85);
      }
    }
  }
}

.right {
  position: absolute;
  right: 0;
  width: 80%;
  height: 100%;
  box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
  // background-color: rgb(27, 139, 238);
}
</style>
